<template>
  <li :class="['relative', 'pl-2', isActive ? 'bg-electric-400/20 ring-2 ring-electric-400 rounded' : '', 'transition', 'mb-1']">
    <div
      class="flex items-center gap-2 cursor-pointer group select-none py-1.5 px-2 rounded-lg hover:bg-electric-400/10 transition relative"
      :style="{
        marginLeft: level === 0 ? '0' : (level * 18) + 'px',
        fontSize: level === 0 ? '1.08rem' : (0.98 - level * 0.04) + 'rem',
        fontWeight: level === 0 ? 700 : 500,
        lineHeight: '1.5',
        minHeight: '1.8em'
      }"
      @click="select"
    >
      <!-- 彩色圆点 -->
      <span
        class="inline-block mr-2 transition-all duration-200"
        :style="{
          width: level === 0 ? '14px' : '10px',
          height: level === 0 ? '14px' : '10px',
          borderRadius: '50%',
          background: nodeColor,
          boxShadow: isActive ? '0 0 0 3px ' + nodeColor + '44' : 'none',
          border: isActive ? '2px solid #0ff' : '1.5px solid #fff',
          transform: isActive ? 'scale(1.15)' : 'scale(1)'
        }"
      ></span>
      <!-- 折叠/展开图标 -->
      <span v-if="node.children && node.children.length" @click.stop="toggle" class="inline-block w-4 h-4 text-electric-400 text-center cursor-pointer">
        <svg v-if="isCollapsed" class="inline w-3 h-3" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" :fill="nodeColor" opacity="0.18"/><path d="M8 3v10M3 8h10" :stroke="nodeColor" stroke-width="2" fill="none"/></svg>
        <svg v-else class="inline w-3 h-3" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" :fill="nodeColor" opacity="0.18"/><path d="M3 8h10" :stroke="nodeColor" stroke-width="2" fill="none"/></svg>
      </span>
      <!-- 节点文本 -->
      <span :class="[level === 0 ? 'font-bold text-electric-400' : 'font-semibold', 'transition', isActive ? 'text-electric-400' : 'text-cyan-100', 'hover:underline', level === 0 ? 'text-base' : '']">
        {{ node.title }}
      </span>
    </div>
    <!-- 连线（左侧竖线） -->
    <span v-if="level > 0" class="absolute left-0 top-0 h-full w-3 z-0" :style="{borderLeft: '2px solid ' + nodeColor, borderRadius: '8px'}"></span>
    <ul v-if="!isCollapsed && node.children && node.children.length" class="ml-2 pl-2 mt-0.5">
      <template v-for="(child, idx) in node.children">
        <MindmapNode
          v-if="typeof child === 'object'"
          :key="(child.title || 'node') + '-' + idx"
          :node="child"
          :level="level+1"
          :activeNode="activeNode"
          @toggle="$emit('toggle', $event)"
          @select="$emit('select', $event)" />
        <li v-else :key="'str-' + idx" class="pl-2 text-cyan-300 italic text-xs leading-tight">{{ child }}</li>
        <!-- 组间距：如果下一个 child 是对象且当前是最后一个对象，则加大间距 -->
        <div v-if="idx < node.children.length - 1 && typeof child === 'object' && typeof node.children[idx+1] === 'object'" style="height:0.5em;"></div>
      </template>
    </ul>
  </li>
</template>

<script>
const colorPalette = [
  '#0ff', // 电光蓝
  '#ffb300', // 橙
  '#00e676', // 绿
  '#ff4081', // 粉
  '#7c4dff', // 紫
  '#00bcd4', // 青
  '#ff5252', // 红
  '#ffd600', // 黄
  '#536dfe', // 蓝紫
  '#69f0ae'  // 浅绿
];
export default {
  name: 'MindmapNode',
  props: {
    node: { type: Object, required: true },
    level: { type: Number, default: 0 },
    activeNode: { type: Object, default: null }
  },
  emits: ['toggle', 'select'],
  computed: {
    isCollapsed() {
      return !!this.node._collapsed;
    },
    isActive() {
      return this.activeNode === this.node;
    },
    nodeColor() {
      // 层级色盘循环
      return colorPalette[this.level % colorPalette.length];
    }
  },
  methods: {
    toggle(e) {
      e?.stopPropagation();
      if (this.node.children && this.node.children.length) {
        this.$set(this.node, '_collapsed', !this.node._collapsed);
        this.$emit('toggle', this.node);
      }
    },
    select(e) {
      e?.stopPropagation();
      this.$emit('select', this.node);
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
  position: relative;
}
ul {
  padding-left: 0;
}
li:hover > div {
  box-shadow: 0 2px 10px 0 #0ff2, 0 0 0 1.5px #0ff2;
  z-index: 2;
}
li:active > div {
  box-shadow: 0 2px 14px 0 #0ff4, 0 0 0 2px #0ff4;
}
</style>
<style>
/* 浅色模式下脑图节点高对比度适配 */
.theme-light .text-cyan-100 {
  color: #0073e6 !important;
}
.theme-light .text-cyan-300 {
  color: #0097a7 !important;
}
.theme-light .text-electric-400 {
  color: #0073e6 !important;
}
.theme-light .bg-electric-400\/10 {
  background: #e6f7ff !important;
}
.theme-light .ring-electric-400 {
  box-shadow: 0 0 0 2px #0073e6 !important;
}
.theme-light .font-bold,
.theme-light .font-semibold {
  color: #0073e6 !important;
}
.theme-light li.bg-electric-400\/20 {
  background: #e6f7ff !important;
}
.theme-light li {
  background: transparent;
}
.theme-light .hover\:bg-electric-400\/10:hover {
  background: #e6f7ff !important;
}
.theme-light .italic {
  color: #0097a7 !important;
}
</style>
